<template>
	<view class="">
		
	  <view class="message_list">
	  	<view class="message_item flex_layout" v-if="clinic_detail.name">
	  		<view class="left_name">门店</view>
				<view class="flex_layout right_input">
					<!-- <input type="text" name='nickname' :value="userinfo.nickname"  placeholder="请输入昵称" placeholder-style="color:#999" /> -->
					<text>{{clinic_detail.name}}</text>
				</view>
	    </view>
			<view class="message_item flex_layout" v-if="coupon_category_id.nametext">
				<view class="left_name">优惠券名称</view>
				<view class="flex_layout right_input">
					<!-- <input type="text" name='realname' :value="userinfo.realname" placeholder="请输入姓名" placeholder-style="color:#999" /> -->
					<text>{{coupon_category_id.nametext}}</text>
				</view>
			</view>
			<view class="message_item flex_layout" v-if="coupon_category_id.pricenumber">
				<view class="left_name">优惠券面值</view>
				<view class="flex_layout right_input">
					<!-- <input type="number" name='mobile' :value="userinfo.mobile" placeholder="请输入电话号码" placeholder-style="color:#999" /> -->
					<text>{{coupon_category_id.pricenumber}}</text>
				</view>
			</view>
			<view class="message_item flex_layout">
				<view class="left_name">优惠券编码</view>
				<view class="flex_layout right_input">
					<!-- <input type="number" name='mobile' :value="number" placeholder="请输入电话号码" placeholder-style="color:#999" /> -->
					<text>{{number}}</text>
				</view>
			</view>
			<view class="message_item flex_layout">
				<view class="left_name">状态</view>
				<view class="flex_layout right_input">
					<!-- <input type="number" name='mobile' :value="number" placeholder="请输入电话号码" placeholder-style="color:#999" /> -->
					<text>{{statusdata==0?'未使用':'已使用'}}</text>
				</view>
			</view>
			<block v-if="statusdata==0">
				<view class="submit_btn" @click="affirmBtn">
					<button class="btn-submit">确认核销</button>
				</view>
			</block>
			
			<block v-else>
				<view class="submit_btn" @click="gohome">
					<button class="btn-back">返回首页</button>
				</view>
			</block>
	  </view>

	</view>
</template>


<script>
	//md5加密
	import md5 from '../../config/md5.js'
	export default {
		data() {
			return {
				number:'',
				userinfo:'',
				statusdata:'',
				appointmentStatus:'',
				unionid:'',
				clinic_detail:'',
				coupon_category_id:'',
				i:0
			}
		},
		onLoad(option) {
			this.number=option.number
			this.getMyCouponDetails()
		},
		methods: {
			gohome:function(){
				uni.navigateTo({
					url:'../index/index'
				})
			},
			//获取优惠券具体数据
			getMyCouponDetails:function(){
				var that=this;
				var id=that.id;
				this.$api.getCouponDetails(
				    {number:that.number,id:'',type:1},
					res => {
						if (res.code == 1) {
							console.log(res);
							that.userinfo=res.data.userinfo
							that.clinic_detail=res.data.clinic_detail
							that.coupon_category_id=res.data.coupon_category_id
							that.code=res.code;
							that.statusdata=res.data.statusdata;
							that.appointmentStatus=res.data.appointmentStatus;
							that.unionid=res.data.unionid;
							that.errmsg=res.data.errmsg;
							if(that.statusdata!=1 || that.appointmentStatus!=1){
								uni.showToast({
									title: res.data.errmsg,
									icon: "none",
									duration: 1500
								})
							}
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1500
							})
						}
					}
				)
			},
			affirmBtn: function(){
				var that=this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认核销',
				    success: function (res) {
				        if (res.confirm) {
									//用户点击确定
									that.$common.loadToShow()
									//更新优惠券状态
									// if(that.unionid){
									// 	//有unionid的才需要更新第三方，否则不需要
									// 	that.updateThird();
									// }else{
										that.updateCouponStatus(0);
									//}
									//end
									
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			updateCouponStatus:function(updateThird=1){
				var that=this;
				that.$api.getVerifyCoupon(
				    {number:that.number},
					res => {
						that.$common.loadToHide();
						if (res.code == 1) {
							uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
							})
							setTimeout(function(){
										uni.navigateTo({
											url:'status?code=1'
										})
							},1000)	
						}
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
							setTimeout(function(){
								uni.navigateTo({
									url:'status?code=0'
								})
							},1000)
							
						}
					}
				)
			},
			updateThird(){
				var that=this;
				//第三方更新数据
				//小程序前端请求方式以及请求参数
				var timestamp = (new Date()).valueOf();
				that.number='656364346662';
				that.unionid='opv1W06pH5wDdrotWQTt1syu1Kxg'; 
				console.log("timestamp: ",timestamp);
				console.log("number: ",that.number);
				console.log("unionid: ",that.unionid);
				
				var sign=md5('mk-straumann'+timestamp+that.unionid+that.number+'c18735d68299acbacf8c74da735236632021'); // 默认为32位加密
	　　　　　　 console.log("sign: ",sign);
				wx.request({
				  url:'http://dsopatientupdate.straumann.cn/api/couponStateUpdate',
				  method: 'post',
				  dataType:'json',
				  data: {"coupon_num":that.number,"unionid":that.unionid,"mk":"mk-straumann","timestamp":timestamp},
				  header: {'content-type':'application/json',"sign":sign},
				  success:function(res){
					  console.log("res: ",res);
					  if(res.errcode==200){
						  //本地更新成功后提示
						  that.updateCouponStatus();
						 
					  }else{
						  //第三方没有更新成功
						  i++;
						  if(i<3){
							  //如果没有更新成功，则再重复操作两次
							 that.updateThird();   
						  }else{
							uni.showToast({
								title:'优惠券更新失败，请稍后尝试',
								icon: "none",
								duration: 1000
							}) 
						  }
						
					  }
					
				  },
				  
				})
			},
		}
	}
</script>

<style>
	@import url('../../common/common.css');
	page{background: #fff;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.message_item{padding: 50upx 30upx; border-bottom: 1px solid #f2f2f2;}
	.face {
		text-align: center;
		padding-top: 60upx;
	}
	
	.face_img{width: 150upx; height: 150upx; position: relative; overflow: hidden; border-radius: 50%; margin: 0 auto;}
	
	.face_img>image {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx
	}
	.updateImg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;}
	.updateImg image{width: 36upx; height: 30upx;}
	.message_item:last-child{border: none} 
	.left_name{width: 150upx; color: #333; font-size: 30upx;}
	.right_input{padding-left: 57upx; width: 530upx;}
	.right_input text{display: block; width: 500upx; padding-right: 30upx; box-sizing: border-box; color: #333; font-size: 30upx;}
	.right_input image{width: 13upx; height: 23upx; display: block;}
	.right_input .pickerDate{color: #999; font-size: 30upx;}
	.right_input .active{color: #333;}
	.sexLabel{margin-right: 30upx;}
	.sexLabel view radio{margin-right: 10upx;}
	.submit_btn button.btn-submit{width: 60%; height: 60upx;line-height: 60upx;  border-radius: 60upx; background: #2562a1; color: #fff; font-size: 32upx;}
	.submit_btn button.btn-back{width: 30%; height: 50upx; line-height: 50upx; border-radius: 50upx; background: #fff; color: #2562a1; border:1px solid #2562a1; font-size: 28upx;}
	.picker_color1{color: #ccc; font-size: 30upx;}
	.picker_color2{color: #333; font-size: 30upx;}
</style>
